<template>
  <div class="table-container">
    <!-- 表头 -->
    <div class="table-header">
      <div
        v-for="(col, colIndex) in columns"
        :key="colIndex"
        class="header-cell"
        :style="{ width: col.width + 'px' }"
      >
        {{ col.title }}
      </div>
    </div>

    <!-- 虚拟滚动区域 -->
    <RecycleScroller
      class="scroller"
      :items="mergedRows"
      :item-size="rowHeight"
      key-field="id"
      :buffer="buffer"
    >
      <template v-slot="{ item: row, index }">
        <div class="row" :style="{ height: rowHeight + 'px' }">
          <!-- 第一列（支持合并） -->
          <div
            class="cell"
            :style="{
              width: columns[0].width + 'px',
              height: row.rowspanRow ? row.rowspan * rowHeight + 'px' : '100%',
            }"
            v-show="!row.hidden"
          >
            <div v-if="row.rowspanRow" class="cell-content">
              {{ row[columns[0].key] }}
            </div>
          </div>

          <!-- 第二列（支持合并） -->
          <div
            class="cell"
            :style="{
              width: columns[1].width + 'px',
              height: row.rowspanRow ? row.rowspan * rowHeight + 'px' : '100%',
            }"
            v-show="!row.hidden"
          >
            <div v-if="row.rowspanRow" class="cell-content">
              {{ row[columns[1].key] }}
            </div>
          </div>

          <!-- 其他列（正常显示） -->
          <div
            v-for="(col, colIndex) in columns.slice(2)"
            :key="colIndex + 2"
            class="cell"
            :style="{ width: col.width + 'px' }"
          >
            <div class="cell-content">
              {{ row[col.key] }}
            </div>
          </div>
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

// 表格配置
const columns = ref([
  { title: '姓名', key: 'name', width: 150 },
  { title: '部门', key: 'department', width: 200 },
  { title: '职位', key: 'position', width: 180 },
  { title: '入职日期', key: 'date', width: 150 },
  { title: '状态', key: 'status', width: 100 },
]);

// 原始数据
const sourceData = ref([
  {
    id: 1,
    name: '张三',
    department: '技术部',
    position: '前端工程师',
    date: '2020-01-15',
    status: '在职',
  },
  {
    id: 2,
    name: '张三',
    department: '技术部',
    position: '架构师',
    date: '2018-03-22',
    status: '在职',
  },
  {
    id: 3,
    name: '李四',
    department: '设计部',
    position: 'UI设计师',
    date: '2021-11-30',
    status: '离职',
  },
  {
    id: 4,
    name: '李四',
    department: '设计部',
    position: '设计总监',
    date: '2019-07-12',
    status: '在职',
  },
  {
    id: 5,
    name: '李四',
    department: '设计部',
    position: '实习生',
    date: '2022-05-18',
    status: '实习',
  },
  {
    id: 6,
    name: '王五',
    department: '市场部',
    position: '市场专员',
    date: '2021-08-09',
    status: '在职',
  },
  // 更多数据...
]);

// 行高配置
const rowHeight = 50;
const buffer = 200;

// 处理合并逻辑后的数据
const mergedRows = computed(() => {
  const rows = JSON.parse(JSON.stringify(sourceData.value));
  let lastMergeKey1 = null;
  let lastMergeKey2 = null;
  let mergeCount1 = 0;
  let mergeCount2 = 0;

  // 倒序遍历处理合并
  for (let i = rows.length - 1; i >= 0; i--) {
    const row = rows[i];

    // 重置合并状态
    row.rowspan = 1;
    row.rowspanRow = false;
    row.hidden = false;

    // 处理第一列合并
    if (row.name === lastMergeKey1) {
      mergeCount1++;
      row.hidden = true;
      rows[i + 1].rowspan = mergeCount1 + 1;
    } else {
      lastMergeKey1 = row.name;
      mergeCount1 = 1;
      row.rowspanRow = true;
    }

    // 处理第二列合并
    if (row.department === lastMergeKey2) {
      mergeCount2++;
      row.hidden = true;
      rows[i + 1].rowspan = Math.max(rows[i + 1].rowspan, mergeCount2 + 1);
    } else {
      lastMergeKey2 = row.department;
      mergeCount2 = 1;
      row.rowspanRow = true;
    }
  }

  return rows;
});

// 初始化数据
onMounted(() => {
  // 这里可以添加数据获取逻辑
  console.log('Table initialized with virtual scroll and row merging');
});
</script>

<style scoped>
.table-container {
  height: 500px;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e0e0e0;
}

.header-cell {
  padding: 12px 16px;
  font-weight: bold;
  color: #606266;
  text-align: left;
}

.scroller {
  flex: 1;
  overflow: auto;
}

.row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}

.cell {
  padding: 0 16px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

.cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 奇偶行颜色区分 */
.row:nth-child(even) {
  background-color: #fafafa;
}

.row:hover {
  background-color: #f5f7fa;
}
</style>
